<template>
  <div>
    <el-input v-model="account.username" />
    <el-input v-model="account.password" />
    <el-button @click="doLogin"><i class="iconfont icon-fenxi" />登录</el-button>
    <el-button @click="testAdd">testAdd</el-button>
    <el-button @click="testList">testList</el-button>
    <el-button @click="logCount"><Icons name="ans" size="16" />登录</el-button>
    <el-button @click="testOn">on</el-button>
    <el-button @click="testEmit">emit</el-button>
    <el-button @click="testOff">off</el-button>
    <el-button @click="testClear">clear</el-button>
    <hr />
    <el-button @click="send">send</el-button>
    <el-button @click="setHeader">setHeader</el-button>
    <el-button @click="test"></el-button>
    <el-button @click="toTest">To Test Page</el-button>
    <ul>
      <li v-for="(item, index) in arr.tableData" :key="index">
        {{ item.name }}
      </li>
    </ul>
    <icons name="Battery-empty" size="24" ref="batteryIcon" />
    <el-skeleton animated :rows="7" :loading="loading">
      <template #default>
        <ReGithub />
      </template>
    </el-skeleton>
    <h1>Element-plus</h1>
    <el-form ref="formRef" :model="form" label-width="120px">
      <el-form-item label="Activity name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="el Activity zone">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai"></el-option>
          <el-option label="Zone two" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <h1>Ant-design-vue</h1>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="Activity name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="Activity zone">
        <a-select v-model:value="formState.region" placeholder="please select your zone">
          <a-select-option value="shanghai">Zone one</a-select-option>
          <a-select-option value="beijing">Zone two</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

    <h1>Vxe-table</h1>
    <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent">
      <vxe-form-item title="名称" field="name" :item-render="{}">
        <template #default="{ data }">
          <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="昵称" field="nickname" :item-render="{}">
        <template #default="{ data }">
          <vxe-input v-model="data.nickname" placeholder="请输入昵称"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="性别" field="sex" :item-render="{}">
        <template #default="{ data }">
          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
            <vxe-option value="1" label="女"></vxe-option>
            <vxe-option value="2" label="男"></vxe-option>
          </vxe-select>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button type="submit" status="primary" content="默认尺寸"></vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script setup>
import qs from 'qs'
import { useDefaultStore } from '@/store'
import { add, list } from '@/service'

import $http from '@/utils/http'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

const demo1 = reactive({
  formData1: {
    name: '',
    nickname: '',
    sex: '1'
  }
})

const formState = reactive({
  name: '',
  region: undefined,
  date1: undefined,
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

const resetEvent = () => {}
const searchEvent = () => {}

const labelCol = { span: 5 }
const wrapperCol = { span: 14 }

let loading = $ref(true)

onMounted(() => {
  setTimeout(() => {
    loading = false
  }, 1500)
})

const send = () => {
  $http
    .post({
      url: '/oauth/login',
      data: qs.stringify({
        username: 'admin',
        password: '123456'
      })
    })
    .then((res) => {
      console.log(res)
    })
    .catch((e) => {
      console.log(e)
    })
}

const setHeader = () => {
  $http.setHeader({
    'Content-Type': 'application/x-www-form-urlencoded'
  })
}

const arr = reactive({
  tableData: []
})

const state = reactive({
  foo: 1,
  bar: 'ba'
})

const fooRef = toRef(state, 'foo')
console.log(fooRef.value)
console.log(state)
const test = () => {
  fooRef.value += 1
  console.log(fooRef.value)
  console.log(state)
}
const defaultStore = useDefaultStore()
const router = useRouter()

const count = $ref(10)
const toTest = () => {
  console.log('???')

  defaultStore.setToken('xxx999xxx')
  router.push({
    name: 'test'
  })
}

const logCount = () => {
  console.log(count)
}

const account = reactive({
  username: '',
  password: ''
})

const doLogin = async () => {
  // const result = await login({
  //   username: 'admin',
  //   password: '123456'
  // })
  // console.log(result)
  // localStorage.setItem('token', result.token)
  if (account.username && account.password) {
    defaultStore.setToken('xxx999xxx')
    router.replace({
      name: 'home'
    })
  }
}

const testAdd = async () => {
  const result = await add()
  console.log(result)
}

const testList = async () => {
  const result = await list()
  console.log(result)
}

const { proxy } = getCurrentInstance()

const testOn = () => {
  proxy.$bus.on('test', (val) => {
    console.log('test >>> ', val)
  })
  proxy.$bus.on('demo', (val) => {
    console.log('demo >>> ', val)
  })
}

const testEmit = () => {
  proxy.$bus.emit('test', 'hello')
  proxy.$bus.emit('demo', 'world')
}

const testOff = () => {
  proxy.$bus.off('test')
}

const testClear = () => {
  proxy.$bus.clear()
}
</script>

<style lang="scss" scoped></style>
